<template>
  <div class="app">

      <div class="item" v-for="(item,index) in bookshelf" :key="index" @click="read(item)" >

        <div style="padding-left: 2px">
          <el-row :gutter="10">
            <el-col :span="6">
              <img :src="item.bookImg | url" alt="" style="height: 120px;border-radius: 10px;">
            </el-col>
            <el-col :span="16">
              <div class="book-explain">
                <h3>{{item.bookName}}</h3>
                <h5>{{item.bookAuthor}} · 上次读到:{{item.bookStart}}</h5>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="item-arrow" @click.stop="deleteFlow(item.bookName)">
                <i class="el-icon-close" />

              </div>
            </el-col>
          </el-row>
        </div>
      </div>


  </div>
</template>

<script>
// import {baseURL} from "@/utils/axios/axios";

import {updateUser} from "@/utils/api";
import BookInfoComponent from "@/components/book/BookInfoComponent";

export default {
  name: "BookshelfComponent",
  components: {BookInfoComponent},
  props: {},
  data() {
    return {
      bookshelf : Object,
      dialogCode: false,
      currentBook:Object
    }
  }, methods: {
    //更新用户信息
    async updateUser(){
      var user = this.getUser;
      user.password=''
      //console.log(user)
      updateUser(user).then(res=>{
        // console.log("同步")
        // console.log(res)
      })
    },
    deleteFlow(bookName){
      delete this.$store.state.user.bookshelf[bookName];
      this.bookshelf = this.getBookshelf
      if(this.bookshelf[bookName]=== undefined){
        this.notify("删除成功","","success")
        this.$forceUpdate()
        this.updateUser()
      }else{
        this.notify("删除失败","-.-","error")
      }

    },
    read(book){
      this.$router.push({name:"/ChapterPage",params:{book : book}})
    },
    notify(msg,title,type) {
      this.$notify({
        title: title,
        message: msg,
        type: type
      });
    },
  }, watch: {}, computed: {
    getBookshelf:{
      get(){
        return this.$store.getters.getUser.bookshelf;
      }

    },
    getUser:{
      get(){
        return this.$store.getters.getUser;
      }
    }
  },filters:{
    url(value){
      return 'api'+value;
    }
  },created() {
    this.bookshelf = this.getBookshelf
  }
}
</script>

<style scoped>
.app{
  /*width: auto;*/
  padding-top: 1rem;
  /*min-height: 700px;*/
  height: auto;
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: repeat(auto-fill, 285px);
  /*grid-gap: 16px;*/
}
.item{
  padding: 0.5rem;
  line-height: 1rem;
  height: 120px;
  width: 285px;
  border-radius: 5px;
}
.item:hover{
  background-color: rgba(84, 76, 76, 0.1);
  /*transform: scale(1.2);*/
}
.book-explain{
  /*float: left;*/
  text-align: center;
}
.item-arrow{
  /*justify-content: space-evenly;*/
  line-height: 120px;
  padding-right: 0.5rem;

}
.item-arrow:hover{
  color: #409EFF;
}
</style>